<template>
    <span ref="el" style="display:inline-block">useAnimate</span>
</template>

<script setup>
import { ref } from 'vue'
import { useAnimate } from '@vueuse/core'

// const keyframes = { transform: 'rotate(360deg)' };;
// const keyframes = [
//     { transform: 'rotate(0deg)' },
//     { transform: 'rotate(360deg)' },
// ];
const keyframes = ref([
    { clipPath: 'circle(20% at 0% 30%)' },
    { clipPath: 'circle(20% at 50% 80%)' },
    { clipPath: 'circle(20% at 100% 30%)' },
]);

const el = ref();

useAnimate(el, keyframes, 1000);
</script>

<style lang="scss" scoped></style>